<template>
  <div class="app-container">
    <el-card shadow="never">
      <!-- 按钮开始 -->
      <template #header>
        <el-button type="primary" @click="routerBack">
          {{ $t("common.back") }}
        </el-button>
      </template>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="任务基本信息" name="first">
          <el-descriptions class="margin-top" :column="2" border>
            <!-- 任务名称 -->
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">{{ $t("jobDefine.jobCnName") }}</div>
              </template>
              {{ jobDefineData.jobCnName }}
            </el-descriptions-item>
            <!-- 任务分类 -->
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">{{ $t("jobDefine.classify") }}</div>
              </template>
              {{ jobDefineData.classify }}
            </el-descriptions-item>
            <!-- 运行实例 -->
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">{{ $t("jobDefine.instanceName") }}</div>
              </template>
              {{ jobDefineData.instanceName }}
            </el-descriptions-item>
            <!-- 任务权重 -->
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">{{ $t("jobDefine.weight") }}</div>
              </template>
              {{ jobDefineData.weight }}
            </el-descriptions-item>
            <!-- 触发事件 -->
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">{{ $t("jobDefine.eventName") }}</div>
              </template>
              {{ jobDefineData.eventName }}
            </el-descriptions-item>
            <!-- 触发事件内容 -->
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">{{ $t("jobDefine.eventBody") }}</div>
              </template>
              {{ jobDefineData.eventBody }}
            </el-descriptions-item>
            <!-- 任务描述 -->
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">{{ $t("jobDefine.jobDescribe") }}</div>
              </template>
              {{ jobDefineData.jobDescribe }}
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <el-tab-pane label="定时触发器" name="second">
          <el-table :data="jobTriggerData" style="width: 100%">
            <!-- 开始时间 -->
            <el-table-column
              prop="startDate"
              :label="$t('jobTrigger.startDate')"
            >
              <template #default="{ row }">
                <div>
                  {{
                    proxy.$moment.formatDate(
                      row.startDate,
                      "YYYY-MM-DD HH:mm:ss",
                    )
                  }}
                </div>
              </template>
            </el-table-column>
            <!-- 是否立即开始 -->
            <el-table-column prop="startNow" :label="$t('jobTrigger.startNow')">
              <template #default="{ row }">
                <div>
                  {{ Dict.jobTriggerDict.getValue(row.startNow) }}
                </div>
              </template>
            </el-table-column>
            <!-- cron表达式 -->
            <el-table-column prop="cron" :label="$t('jobTrigger.cron')" />
            <!-- cron描述 -->
            <el-table-column
              prop="cronName"
              :label="$t('jobTrigger.cronName')"
            />
            <!-- 是否立即开始 -->
            <el-table-column prop="isCustom" :label="$t('jobTrigger.isCustom')">
              <template #default="{ row }">
                <div>
                  {{ Dict.jobTriggerDict.getValue(row.isCustom) }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="执行日志" name="third">
          <jmash-table
            ref="multipleTableRef"
            class="table-top"
            row-key="recordId"
            :list-loading="listLoading"
            :data="jobRecordData"
            :table-label="tableLabel"
            @selection-change="handleSort"
          >
            <!-- 开始时间 -->
            <template #startDate="scope">
              <span>
                {{
                  proxy.$moment.formatDate(
                    scope.data.row.startDate,
                    "YYYY-MM-DD HH:mm:ss",
                  )
                }}
              </span>
            </template>
            <!-- 结束时间 -->
            <template #endDate="scope">
              <span>
                {{
                  proxy.$moment.formatDate(
                    scope.data.row.endDate,
                    "YYYY-MM-DD HH:mm:ss",
                  )
                }}
              </span>
            </template>
            <!-- 状态 -->
            <template #state="scope">
              <span>
                {{ Dict.recordStateDict.getValue(scope.data.row.state) }}
              </span>
            </template>

            <template #operation="scope">
              <!-- 错误信息 -->
              <span
                class="el-button-color"
                @click="handleInfo(scope.data.row)"
                v-if="scope.data.row.state === false"
              >
                {{ $t("jobRecord.errorMsg") }}
              </span>
            </template>
          </jmash-table>
          <!-- 分页 -->
          <jmash-pagination
            v-if="total > 0"
            v-model:total="total"
            v-model:current-page="queryParams.curPage"
            v-model:page-size="queryParams.pageSize"
            @pagination="jobRecordEvent()"
          />
        </el-tab-pane>
        <!-- 错误信息弹窗 -->
        <error-message-info
          v-if="errorMsgDialog.visible"
          v-model="errorMsgDialog.visible"
          :title="$t('jobRecord.errorMsg')"
          :errorMsg-key="errorMsgKey"
          width="600px"
        />
      </el-tabs>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { ref, onBeforeMount, getCurrentInstance, type Ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { routerUtil, type DialogRef } from "jmash-core";
import { useTableHooks, type TableSort, type TableColumn } from "jmash-core";
import { useI18n } from "vue-i18n";
import { Dict } from "@/api/jobs/index";
import type { JobDefineModel } from "@/api/jobs/job-define/types";
import { jobDefineApi } from "@/api/jobs/job-define";
import type { JobTriggerModel } from "@/api/jobs/job-trigger/types";
import { jobTriggerApi } from "@/api/jobs/job-trigger";
import type { JobRecordModel, JobRecordReq } from "@/api/jobs/job-record/types";
import { jobRecordApi } from "@/api/jobs/job-record";
import errorMessageInfo from "@/views/jobs/job-define/errorMsg.vue";
const { t } = useI18n();
const router = useRouter();
const route = useRoute();
/**
 * 获取全局方法
 * getCurrentInstance()
 * 只能在setup或生命周期中使用，其他地方使用是无效的
 */
const { proxy } = getCurrentInstance() as any;
const queryParams = ref<JobRecordReq>({
  curPage: 1,
  pageSize: 10,
  jobName: route.query.jobName as string,
});
const { tableHooks, total, multipleTableRef, listLoading } = useTableHooks(
  t,
  jobRecordApi,
  queryParams,
);
const jobDefineData = ref<JobDefineModel>({} as JobDefineModel);
const jobTriggerData = ref<Array<JobTriggerModel>>([]);
const jobRecordData = ref<Array<JobRecordModel>>([]);
const activeName = ref<string>("first");
// 切换tab事件
function handleClick(tab: any) {
  activeName.value = tab.props.name;
  if (activeName.value === "second") {
    jobDefineEvent();
  }
  if (activeName.value === "third") {
    jobRecordEvent();
  }
}
// 错误信息弹窗
const errorMsgDialog = ref({
  title: t("jobRecord.errorMsg"),
  visible: false,
} as DialogRef);
const errorMsgKey = ref<string>();
function handleInfo(row: JobRecordModel) {
  errorMsgKey.value = row.errorMsg;
  errorMsgDialog.value.visible = true;
}
// 表格头部标题
let tableLabel: Ref<TableColumn[]> = ref([
  {
    label: "jobRecord.startDate",
    prop: "startDate",
    isColumn: true,
    slotName: "startDate",
    columnType: "slot",
  },
  {
    label: "jobRecord.endDate",
    prop: "endDate",
    isColumn: true,
    slotName: "endDate",
    columnType: "slot",
  },
  {
    label: "jobRecord.state",
    prop: "state",
    isColumn: true,
    slotName: "state",
    columnType: "slot",
  },
  {
    label: "common.operate",
    width: "200",
    slotName: "operation",
    columnType: "slot",
    fixed: "right",
    isColumn: true,
  },
]);
// 返回上一页
function routerBack() {
  routerUtil.closeTagView(route.fullPath, router, false);
}
// 定时触发器列表
function jobDefineEvent() {
  jobTriggerApi
    .findList({ jobName: route.query.jobName as string })
    .then(({ data }) => {
      jobTriggerData.value = data.results;
    });
}
// 定时任务记录列表
function jobRecordEvent() {
  jobRecordApi.findPage(queryParams.value).then(({ data }) => {
    jobRecordData.value = data.results;
  });
}
// 任务定义详情
onBeforeMount(() => {
  jobDefineApi
    .findById({ jobName: route.query.jobName as string })
    .then(({ data }) => {
      jobDefineData.value = Object.assign(jobDefineData.value, data);
    });
});
// 处理排序
function handleSort(sort: TableSort) {
  tableHooks.handleSort(sort.prop, sort.order);
}

// 获取缓存里的数据
tableHooks.getList();
</script>
